<template>
  <div>
    <p>store.count:{{ store.count }}</p>
    <p>count:{{ count }}</p>
    <p>newCount:{{ newCount }}</p>
    <button @click="store.increment()">+</button>
    <button @click="store.remove()">-</button>
    <button @click="increment">++</button>
    <button @click="reset">reset</button>
    <button @click="change">change</button>
    <button @click="changeState">changeState</button>
  </div>
</template>

<script setup>
import { watch } from 'vue'
import { useStore } from '@/store/index'
import { storeToRefs } from 'pinia' // 为了从存储中提取属性同时保持其反应性，需要使用 storeToRefs()，它将为每个反应属性创建参考。当仅使用状态，而不进行任何操作时很有用。

const store = useStore() // store是一个用 reactive 包裹的对象，不能对其进行解构
// 改变状态方式1
store.count++ // 可以通过 store 实例状态来直接读取和写入状态访问
const { count, increment } = store // 如果对状态进行解构，会丢失响应性。导致 count 值一直为初始值，action中的方式可以在此处解构

const { count: newCount } = storeToRefs(store) // 此种方式解构store中的状态，不会丢失响应性

const reset = () => {
  store.$reset() // 调用 $reset() 方法将状态重置为store最初值
}
// 改变状态方式2
const change = () => {
  // store.$patch({
  //   count: store.count++
  // })
  // 或者
  store.$patch((state) => {
    state.count++
  })
}

// 更换 state。$store 将store的属性设置为新对象来替换整个商店的整个状态
const changeState = () => {
  store.$state = {
    counter: 666,
    name: 'pinia'
  }
}

// 订阅状态，通过store的 $subscribe() 方法查看状态及其变化
store.$subscribe((mutation, state)=> {
  console.log(mutation)
  console.log(state)
})

watch(
  store,
  (store) => {
    console.log(store)
  }
)
</script>

<style scoped>

</style>